/**
  @authro: andy
  @description: 切换主题
  
  示例代码：
  .box {
    font-size: 30px;
    border: 4px solid #000;
    .useTheme({
      color : textColor100;
      border-color: textColor100;
      background-color: bgColor;
    } , 0.4);
    .useBg('@/assets/images/#{}/header/logo-bg.png');
  }
*/
@themes: {
  @dark: {
    // 主色，用于选中信息高亮，重要信息高亮，关键行动点，所有与主色相近的颜色，都是通过主色的透明度去修改的不同颜色
    primary-color: #006be6;
    // 边框色，用于边框，分割线颜色
    border-color: #36363a;
    // 页面背景色，用于整个页面背景颜色
    page-bg-color: #1c1e23;
    // 主文字颜色
    text-color: #fff;
    // 次要文字颜色
    text-color-secondary: #666;
    // 说明文字颜色
    text-color-desc: #999;
    // 辅助文字颜色
    text-color-helpful: #B7C1CC;
    // 浮层阴影色
    box-shadow-color: 1px 1.7px 3px 2px #daeaff;
    // 基础色 
    base-color: #007aff;
    // 成功色
    success-color: #7BBD48;
    // 错误色
    error-color: #FF231A;
    // 警告色
    warning-color: #FF9600;
    // 禁用色
    disabled-color: #f5f5f5;
    // 白色
    white-color: rgb(28,30,35);
    // 滚动条颜色
    scrollbar-color: #36363a;
  }
  @light: {
    // 主色，用于选中信息高亮，重要信息高亮，关键行动点，所有与主色相近的颜色，都是通过主色的透明度去修改的不同颜色
    primary-color: #006be6;
    // 边框色，用于边框，分割线颜色
    border-color: #dddfe6;
    // 页面背景色，用于整个页面背景颜色
    page-bg-color: #fff;
    // 主文字颜色
    text-color: #333;
    // 次要文字颜色
    text-color-secondary: #666;
    // 说明文字颜色
    text-color-desc: #999;
    // 辅助文字颜色
    text-color-helpful: #B7C1CC;
    // 浮层阴影色
    box-shadow-color: 1px 1.7px 3px 2px #daeaff;
    // 基础色
    base-color: #007aff;
    // 成功色
    success-color: #7BBD48;
    // 错误色
    error-color: #FF231A;
    // 警告色
    warning-color: #FF9600;
    // 禁用色
    disabled-color: #f5f5f5;
    // 白色
    white-color: #fff;
    // 滚动条颜色
    scrollbar-color: #d8d8d8;
  }
};
.addStyle(@key1 , @key2 , @key3 , @key4 , @opacity) when (@key1 = @key2) {
  @{key3}: rgba(@key4 , @opacity);
};
.addTextGradientColor(@name , @key , @value) when (@key = @name) {
  background-image: @value;
  background-clip: text;
  color: transparent;
};
.addBoxShadow(@name , @key , @value) when (@key = @name) {
  box-shadow: @value;
};
.useBoxShadow(@name) {
  each(@themes , #(@value1 , @key1){
    @theme: replace(@key1 , "@" , "");
    html[data-theme="@{theme}"] & {
      each(@value1 , #(@value2 , @key2) {
        .addBoxShadow(@name, @key2 , @value2);
      })
    }
  })
};
.useTheme(@args: {} , @opacity:1) {
  each(@themes , #(@value1 , @key1){
    @currentTheme: replace(@key1 , "@" , "");
    html[data-theme="@{currentTheme}"] & {
      each(@value1 , #(@value2 , @key2){
        each(@args , #(@value3 , @key3) {
          .addStyle(@key2, @value3, @key3, @value2 , @opacity);
        })
      })
    }
  })
};
.useBg(@url) {
  each(@themes , {
    @theme: replace(@key , "@" , "");
    @src: replace(@url , "(#{})" , @theme);
    html[data-theme="@{theme}"] & {
      background-image: url(@src);
      background-repeat: no-repeat;
    }
  })
};
.useTextGradientColor(@name) {
  each(@themes , #(@value1 , @key1){
    @theme: replace(@key1 , "@" , "");
    html[data-theme="@{theme}"] & {
      each(@value1 , #(@value2 , @key2) {
        .addTextGradientColor(@name, @key2 , @value2);
      })
    }
  })
};

.addBgGradientColor(@name , @key , @value) when (@key = @name) {
  background: @value;
}
// 第二个参数是用背景颜色叠加
.useBgGradientColor(@name) {
  each(@themes , #(@value1 , @key1){
    @theme: replace(@key1 , "@" , "");
    html[data-theme="@{theme}"] & {
      each(@value1 , #(@value2 , @key2) {
        .addBgGradientColor(@name, @key2, @value2)
      })
    }
  })
};

.useGradientColor(@start , @end , @direction) {
  each(@themes , #(@value1 , @key1){
    @theme: replace(@key1 , "@" , "");
    html[data-theme="@{theme}"] & {
      background: linear-gradient(@direction , @start , @end);
    }
  })
}
.addHoverStyle(@key1 , @key2 , @key3 , @key4 , @opacity) when (@key1 = @key2) {
  @{key3}: rgba(@key4 , @opacity) !important;
  cursor: pointer;
}
.useHover(@args: {} , @opacity:0.8) {
  each(@themes , #(@value1 , @key1){
    @currentTheme: replace(@key1 , "@" , "");
    html[data-theme="@{currentTheme}"] &:hover {
      each(@value1 , #(@value2 , @key2){
        each(@args , #(@value3 , @key3) {
          .addHoverStyle(@key2, @value3, @key3, @value2, @opacity);
        })
      })
    }
  });
}
